<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(e, i) in initData" :key="i">
        <div
          class="slide_box"
          :style="'background-image: url(' + e + ')'"
        ></div>
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <!-- <div class="swiper-pagination"></div> -->

    <!-- 如果需要导航按钮 -->
    <!-- <div class="swiper-button-prev"></div> -->
    <!-- <div class="swiper-button-next"></div> -->

    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
  </div>
</template>

<script>
// 调用插件swiper
import "swiper/dist/js/swiper";
import "swiper/dist/css/swiper.css";
import Swiper from "swiper";
export default {
  data() {
    return {
      initData: [
        "http://175.178.92.128:8087/campus_help_system/images/carousel/1.jpg",
        "http://175.178.92.128:8087/campus_help_system/images/carousel/2.jpg",
        "http://175.178.92.128:8087/campus_help_system/images/carousel/1.jpg",
        "http://175.178.92.128:8087/campus_help_system/images/carousel/2.jpg",
        "http://175.178.92.128:8087/campus_help_system/images/carousel/1.jpg",
        "http://175.178.92.128:8087/campus_help_system/images/carousel/2.jpg",
      ],
    };
  },
  created() {},
  mounted() {
    new Swiper(".swiper-container", {
      //   direction: "vertical", // 垂直切换选项
      //mousewheel: true, //滚轮
      autoplay: {
        //自动开始
        delay: 2500, //时间间隔
        disableOnInteraction: false, //*手动操作轮播图后不会暂停*
      },
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable: true, // 分页器可以点击
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      // 如果需要滚动条
      scrollbar: {
        el: ".swiper-scrollbar",
      },
    });
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.swiper-container {
  height: 800px;
  .swiper-slide {
    .slide_box {
      height: 100%;
      background-size: 100% 100%;
      background-position: center center;
      background-repeat: no-repeat;
    }
  }
}
</style>
